import React, { useEffect, useState } from 'react'
import { Modal, Toast } from 'antd-mobile'
import { getCardNaprotocol } from '../../request/home'

function Agreement(props) {
  const { visible, close, cardAddress } = props
  const [agreement, setAgreement] = useState('')

  useEffect(() => {
    getNapotocol().catch(e => console.log(e.message))
  }, [])

  const getNapotocol = async() => {
    const { code, data } = await getCardNaprotocol({ province_code: cardAddress[0] })
    if (code) {
      Toast.fail('获取入网协议失败')
      return false
    }
    setAgreement(data)
  }

  return (
    <div className="agreement">
      <Modal
        visible={visible}
        onClose={close}
        transparent
        closable
        title="入网协议"
        className="agreement--modal"
      >
        <div className="content" dangerouslySetInnerHTML={{ __html: decodeURIComponent(agreement) }}></div>
      </Modal>
    </div>
  )
}

export default Agreement
